<template>
	<div class="container floor3">
		<div class="fixed">
			<van-nav-bar
			  title="IM沟通页面(卖家)"
			  left-arrow
			  @click-left="onClickLeft"
			>		
			  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>
			  <div slot="right">
			  	<van-icon name="phone-o" class="head_icon"  size="24" color="#000" style="margin-right: 4px;"/>
			  	<van-icon name="ellipsis" class="head_icon" size="24" color="#000"/>
			  </div>
		    </van-nav-bar>	
	        
		    <div class="a">
		    	<div class="a_1">
		    		<img src="../../../../static/img/3.jpg" alt="" />
		    	</div>
		    	<div class="a_2">
		    		<div class="a_2_1">¥ 1280.00</div>
		    		<div class="a_2_2">含运费0.0元</div>
		    		<div class="a_2_2">交易前聊一聊</div> 
		    	</div>
		    	<div class="a_3">
		    		<van-button color="#888" plain  style="margin-right: 10px;">修改价格</van-button>
		    		<van-button color="#888" plain  @click="show=true">...</van-button>
		    	</div>
		    </div>
	    </div>
	    
	    
	    
	    
	    <div class="b">
	    	<div class="b_1">
	    		<span class="b_1_1">13:17</span>
	    	</div>
	    	<div class="b_2">
	    		<div class="b_2_1">拍下未付款</div>
	    		<div class="b_2_2" style="border: none;">
                                                        请询问买家是否确认购买,若决定购买请提醒买家尽快付款
	    		</div>
	    	</div>
	    </div>
	    
	    
	    
	    <div class="c" >
	    	<!--买家留言 没有超过5分钟-->
	    	<div class="c_1">	
	    		<div class="c_1_wrap">
		    		<div class="c_1_1 active">未读</div>
		    		<div class="c_1_2">什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的</div>
		    		<div class="c_1_3"><img src="//wwc.alicdn.com/avatar/getAvatar.do?userId=404801279&width=160&height=160&type=sns" alt="" /></div>
	    		</div>
	    	</div>

	    	<div class="c_1">	
	    		<div class="c_1_wrap">
		    		<div class="c_1_1 active">未读</div>
		    		<div class="c_1_4">
		    			<img src="../../../../static/img/1.jpg" alt="" style="width: 200px;"/>
		    		</div>
		    		<div class="c_1_3"><img src="//wwc.alicdn.com/avatar/getAvatar.do?userId=404801279&width=160&height=160&type=sns" alt="" /></div>
	    		</div>
	    	</div>

	    	<!--买家留言 未读状态-->
	    	<div class="c_1">	
	    		<div class="c_1_times">
	    			<span class="c_1_times_1">13:17</span>
	    		</div>
	    		<div class="c_1_wrap">
		    		<div class="c_1_1 active">未读</div>
		    		<div class="c_1_2">什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的</div>
		    		<div class="c_1_3"><img src="//wwc.alicdn.com/avatar/getAvatar.do?userId=404801279&width=160&height=160&type=sns" alt="" /></div>
	    		</div>
	    	</div>
	    	
	    	<!--买家留言 已读状态-->
	    	<div class="c_1">	
	    		<div class="c_1_times">
	    			<span class="c_1_times_1">13:17</span>
	    		</div>
	    		<div class="c_1_wrap">
		    		<div class="c_1_1">已读</div>
		    		<div class="c_1_2">什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的什么牌子的</div>
		    		<div class="c_1_3"><img src="//wwc.alicdn.com/avatar/getAvatar.do?userId=404801279&width=160&height=160&type=sns" alt="" /></div>
	    		</div>
	    	</div>		    	
	    	
            <!--卖家回复文字-->
	    	<div class="c_2">
	    		<div class="c_2_1">
	    			<img src="//wwc.alicdn.com/avatar/getAvatar.do?userId=404801279&width=160&height=160&type=sns" alt="" />
	    		</div>
	    		<div class="c_2_2">
	    		     <div>我好运624</div>
	    		     <div class="c_2_2_1">不知道啊不知道啊不知道啊不知道啊不知道啊不知道啊不知道啊不知道啊不知道啊不知道啊不知道啊不知道啊不知道啊</div>
	    		</div>
	    	</div>
	    	
	    	<!--卖家留言图片-->
	    	<div class="c_2">
	    		<div class="c_2_1">
	    			<img src="//wwc.alicdn.com/avatar/getAvatar.do?userId=404801279&width=160&height=160&type=sns" alt="" />
	    		</div>
	    		<div class="c_2_2">
	    		     <div>我好运624</div>
	    		     <div class="c_2_2_2">
	    		     	<img src="../../../../static/img/1.jpg" alt="" />
	    		     </div>
	    		</div>
	    	</div>	    	
	    </div>
	    
	    <div class="d">
            <div><van-icon name="phone-circle-o" class="d_icon"/></div>
            <div class="d_input_wrap"><input type="text" class="d_input" v-model="message" placeholder="想跟TA说点什么呢"/></div> 
            <div style="margin-right: 5px;"><van-icon name="smile-o" class="d_icon"/></div> 
            <div><van-icon name="add-o" class="d_icon"/></div> 
	    </div>
	    
        <van-popup v-model="show">
      	 <div class="show">
      	 	<div class="show_ul">
      	 		<div class="show_li" >
      	 			 关闭交易
      	 		</div>
      	 		<div class="show_li" >
      	 			 宝贝快照
      	 		</div>      	 		
      	 	</div>
      	 </div>
        </van-popup>	    
	</div>	
</template>

<script>	
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {
	name: 'LinkUp1',
	components: {
	},			
	data() {
       return {
       	 show:false,
         message:'dddd'
       }
	},
	methods: {	
       aaaa(){
       	  alert(this.message)
       }
	},
	mixins:[publicFun],//混入	
	mounted() {
	}
}	
</script>

<style scoped="" lang="scss">
.van-nav-bar__title{font-weight: bold;}
.container{background: #f3f3f3;min-height: 100%;width: 100%;position: absolute;}
.show{width: 300px;background: #fff;padding: 20px 0;}
.show_li{margin-bottom: 20px;font-size: 16px;padding-left: 20px;}
.show_li:nth-last-child(1){margin-bottom: 0;}
.floor3{
	.fixed{position: fixed;width: 100%;z-index: 100;}
	.a{
		box-shadow:0px 1px 5px #ddd;background: #fff;padding: 15px 5px 5px;display: flex;align-items: center;
		
		.a_1{
			img{width: 60px;height: 60px;}
		}
		.a_2{
			margin-left: 5px;flex: 1;
			.a_2_1{font-size: 14px;font-weight: 600;}
			.a_2_2{color: #aaa;margin-top: 5px;}		
		}
	}
	
	.b{ 
		padding: 10px;margin-top: 130px;
		.b_1{
			text-align: center;padding:10px 0;
			.b_1_1{background: #cccccc;padding: 2px 4px;color: #fff;border-radius: 4px;}
		}
		.b_2{
			padding: 15px;background: #fff;border:1px solid #efefef;box-shadow: 0 0 1px #ddd;
			.b_2_1{font-size: 16px;font-weight: bold;}
			.b_2_2{
				padding: 10px 0;border-bottom: 1px solid #efefef;color: #999;font-size: 12px;line-height: 1.6;
				.b_2_2_1{color: $font-color1;font-weight: bold;}
			}
			.b_2_3{
				padding-top: 15px;display: flex;justify-content: space-between;align-items: center;font-size: 16px;
				.b_2_3_1{color:$font-color2;}
			}
		}
		
	}
	.c{
		padding: 10px 10px 60px;
		.c_1{
			margin-bottom:20px;			
			.c_1_times{
				text-align: center;padding: 10px 0;
				.c_1_times_1{background: #cccccc;padding: 2px 4px;color: #fff;border-radius: 4px;}
			}
			.c_1_wrap{display: flex;justify-content: flex-end;}
			.c_1_1{display: flex;flex-direction: column;justify-content: flex-end;color: #aaa;}
			.c_1_1.active{color:$font-color1}
			.c_1_2{display:flex;align-items: center;padding:10px;margin: 0 5px;
			background: $bg-color1;border-radius: 4px;max-width: 200px;}
			.c_1_4{margin: 0 5px;img{border-radius: 4px;}}
			.c_1_3{
				img{width: 30px;height: 30px;border-radius: 4px;display: block;}
			}
		}
		.c_2{
			display: flex;padding: 10px 0;
			.c_2_1{
				margin-right:5px;
				img{width: 30px;height: 30px;border-radius: 4px;display: block;}
			}
			.c_2_2_1{background: #fff;padding: 10px;margin-top: 5px;max-width: 200px;border-radius: 4px;}
			.c_2_2_2 img{width: 200px;margin-top: 5px;border-radius: 4px;}
		}
	}
	.d{
		position: fixed;bottom: 0;left: 0;width: 100%;background: #fff;
	    border-top: 1px solid #ddd;padding: 10px;box-sizing: border-box;
	    display: flex;align-items: center;	    
        .d_icon{font-size: 28px;}
        .d_input_wrap{flex: 1;margin: 0 10px;}
        .d_input{height: 28px;border:none;font-size: 16px;width: 100%;}
	}
	
}
</style>